<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<link rel="stylesheet" href="/public/static/layuiadmin/layui/css/layui.css" media="all">
	<link rel="stylesheet" href="/public/static/layuiadmin/style/admin.css" media="all">
</head>

<body>
	<div class="layui-fluid">
		<div class="layui-row layui-col-space15">
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-body">
						<table class="layui-hide" id="test-table-reload" lay-filter="role"></table>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/html" id="toolbar">
	    <div class="layui-inline">
	        <select name="type" id="type">
                <option value="">请选择用户类型</option>
                <option value="1">个人</option>
                <option value="2">企业</option>
                <option value="3">其他</option>
            </select>
	    </div>
		<div class="layui-inline">
		    <input class="layui-input" name="search" id="demoReload" placeholder="会员编号|手机号|账户" autocomplete="off">
		</div>
		<a class="layui-btn layui-btn-sm layuiadmin-btn-list" data-type="searchReload">搜索</a>
	</script>
	<script type="text/html" id="operateTpl">
		<a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="detail">查看</a>
		<a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</a>
		<a class="layui-btn layui-btn-sm layui-btn-warm" lay-event="resetPassword">重置密码</a>
	</script>
	<script type="text/html" id="imgTpl">
		<img width="200" src="{{d.images}}" onerror="javascript:this.src='/public/static/Admin/img/default.png';" />
	</script>
	<script type="text/html" id="phoneTpl">
	    {{# if (d.type == 1) { }}
	    {{d.phone}}
	    {{# }else{ }}
	    {{d.company_phone}}
	    {{# } }}
	</script>
	<script type="text/html" id="typeTpl">
		{{# if (d.type == 1) { }}
		<button type="button" class="layui-btn layui-btn-sm">个人</button>
		{{# }else if (d.type == 2) { }}
		<button type="button" class="layui-btn layui-btn-normal layui-btn-sm">企业</button>
		{{# } else { }}
		<button type="button" class="layui-btn layui-btn-danger layui-btn-sm">其他</button>
		{{# } }}
	</script>
	<script type="text/html" id="statusTpl">
		<input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="正常|停用" lay-filter="statusDemo" {{ d.status == 1 ? 'checked' : '' }}>
	</script>
	<script src="/public/static/layuiadmin/layui/layui.js"></script>
	<script>
		layui.config({
			base: '/public/static/layuiadmin/' // 静态资源所在路径
		}).extend({
			index: 'lib/index', // 主入口模块
			api: 'api'
		}).use(['index', 'table', 'api', 'form', 'laydate', 'laypage', 'layer'], function () {
			var $ = layui.jquery;
			var table = layui.table;
			var layer = layui.layer;
			var laydate = layui.laydate;
			var laypage = layui.laypage;
			var api = layui.api;
			var form = layui.form;

			var _table = {
				reloads: function () {
					renderTable();
				}
			}

			window.tables = _table;

			var renderTable = function () {
				// 执行一个 table 实例
				table.render({
					elem: '#test-table-reload',
					url: '{:url("getList")}?module_id={$params.module_id}', // 数据接口
					title: '案例',
					page: true, // 开启分页
					toolbar: '#toolbar', // 开启工具栏，此处显示默认图标，可以自定义模板，详见文档
					cols: [
						[
							// 表头
							{
								type: 'checkbox'
							}, {
								field: 'id',
								title: 'ID',
								width: 80,
								sort: true
							}, {
								field: 'username',
								title: '用户名'
							}, {
								field: 'email',
								title: '邮箱',
								width: 200
							}, {
								field: 'phone',
								title: '手机号',
								width: 150,
								templet: '#phoneTpl'
							}, {
								field: 'create_time',
								title: '注册时间',
								width: 200
							}, {
								field: 'type',
								title: '类型',
								width: 150,
								templet: '#typeTpl'
							}, {
								field: 'status',
								title: '状态',
								width: 150,
								templet: '#statusTpl'
							}, {
								title: '操作',
								width: 230,
								templet: '#operateTpl'
							}
						]
					],
					height: 'full-50',
					id: 'testReload',
					limit: 30,
					limits: [30, 50, 100, 150, 200, 300, 500],
					done: function (res, curr, count) {
						if (res.params.key) {
							$('#demoReload').val(res.params.key.search);
							$('#type').val(res.params.key.type);
							form.render('select');
						}
						layer.closeAll('loading');
					}
				});
			}

			// 方法级渲染
			var $ = layui.$,
				active = {
					batchdel: function () {
						var checkStatus = table.checkStatus('test-table-reload'),
							checkData = checkStatus.data; // 得到选中的数据
						if (checkData.length === 0) {
							return layer.msg('请选择要删除的数据', {
								icon: 0,
								shade: [0.5, '#393D49']
							});
						}
						layer.confirm('确定删除吗？', function (index) {
							var dats = {
								ids: []
							};
							for (var k in checkData) {
								dats.ids.push(checkData[k].id);
							}
							layer.msg('删除中', {
								icon: 16,
								shade: 0.01
							});
							api.ajax('{:url("delete")}', 'post', 'json', dats, function (res) {
								layer.closeAll('loading');
								layer.msg(res.msg)
							});
							renderTable();
						});
					},
					add: function () {
						parent.layui.index.openTabsPage('{:url("add")}?module_id={$params.module_id}', '添加');
					},
					searchReload: function () {
						var demoReload = $('#demoReload');
						var type = $('#type');
						// 执行重载
						table.reload('testReload', {
							page: {
								curr: 1 // 重新从第 1 页开始
							},
							where: {
								key: {
								    type: type.val(),
									search: demoReload.val()
								}
							}
						}, 'data');
					}
				};

			// 监听单元格编辑
			table.on('edit(role)', function (obj) {
				var value = obj.value, // 得到修改后的值
					data = obj.data, // 得到所在行所有键值
					field = obj.field; // 得到字段
				var dats = {};
				dats['id'] = data.id;
				dats[field] = value
				api.ajax('{:url("inputChange")}', 'post', 'json', dats, function (res) {
					layer.msg(res.msg)
				});
			});

			// 监听性别操作
			form.on('switch(showDemo)', function (obj) {
				var dats = {},
					val = 1;
				dats['id'] = this.value;
				if (!obj.elem.checked) {
					val = 2
				}
				dats[this.name] = val;
				layer.msg('加载中', {
					icon: 16,
					shade: 0.01
				});
				api.ajax('{:url("inputChange")}', 'post', 'json', dats, function (res) {
					layer.closeAll('loading');
					layer.msg(res.msg)
				});
			});

			// 监听性别操作
			form.on('switch(statusDemo)', function (obj) {
				var dats = {},
					val = 1;
				dats['id'] = this.value;
				if (!obj.elem.checked) {
					val = 2
				}
				dats[this.name] = val;
				layer.msg('加载中', {
					icon: 16,
					shade: 0.01
				});
				api.ajax('{:url("inputChange")}', 'post', 'json', dats, function (res) {
					layer.closeAll('loading');
					layer.msg(res.msg)
				});
			});

			// 监听工具条 
			table.on('tool(role)', function (obj) {
				// 注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
				var data = obj.data; // 获得当前行数据
				var layEvent = obj.event; // 获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				var tr = obj.tr; // 获得当前行 tr 的 DOM 对象（如果有的话）
				if (layEvent === 'detail') {
					// 查看
					parent.layui.index.openTabsPage('{:url("detail")}?id=' + data.id, '查看');
				} else if (layEvent === 'del') {
					// 删除
					layer.confirm('确定要删除么', function (index) {
						var dats = {
							ids: [data.id]
						};
						layer.msg('加载中', {
							icon: 16,
							shade: 0.01
						});
						api.ajax('{:url("delete")}', 'post', 'json', dats, function (res) {
							layer.closeAll('loading');
							layer.msg(res.msg);
							obj.del(); // 删除对应行（tr）的DOM结构，并更新缓存
							layer.close(index); // 向服务端发送删除指令
						});
					});
				} else if (layEvent === 'edit') {
					// 编辑
					parent.layui.index.openTabsPage('{:url("Integral/index")}?member_id=' + data.id, '积分管理');
				} else if (layEvent === 'resetPassword') {
					layer.confirm('重置密码为（123456a），是否重置？', function (index) {
						var dats = {
							ids: [data.id]
						};
						layer.msg('加载中', {
							icon: 16,
							shade: 0.01
						});
						api.ajax('{:url("resetPassword")}', 'post', 'json', dats, function (res) {
							layer.closeAll('loading');
							layer.msg(res.msg);
							layer.close(index); // 向服务端发送删除指令
						});
					});
				} else if (layEvent === 'LAYTABLE_TIPS') {
					layer.alert('Hi，头部工具栏扩展的右侧图标。');
				}
			});

			$('.layui-card').on('click', '.layuiadmin-btn-list', function () {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});
			renderTable();
		});
	</script>
	<style type="text/css">
		.layui-table-cell {
			text-align: center;
			height: auto;
			white-space: normal;
		}
	</style>
</body>

</html>